<!--
 * Description: FD Detail 组件(FD查看)
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/10 16:15
-->

<template>
  <div class="fd-detail">
    <!--TODO: 设置用户的习惯按钮 -->
    <el-tooltip class="item" content="自定义表格显示列" effect="dark" placement="top">
      <button class="set-fd-cell" @click="setDialogVisible = true"></button>
    </el-tooltip>
    <div class="custom-top">
      <div class="total-result">
        <table>
          <tr>
            <td>总行数：{{ totalResult.totalLen }}</td>
            |
            <td>当前行数：{{ totalResult.currentLen }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="custom-bottom">
      <VirtualTable
        :cb="totalCb"
        :filterable="true"
        :header-cell-style="$headerCellStyle"
        rowKey="rfqRowId"
        :table="shareDataList"
      >
        <!-- rowNo -->
        <Cell fix="left" :label="$t('FdData.rowNo')" :width="50">
          <template slot-scope="scope">
            <span>{{ scope.index + 1 }}</span>
          </template>
        </Cell>
        <!-- 正式物料编码 -->
        <Cell v-if="cellIsShow.IsPartNumber" fix="left" label="正式物料编码" prop="partNumber" />
        <!-- 物料描述 -->
        <Cell v-if="cellIsShow.IsPartName" fix="left" label="物料描述" prop="partName" />
        <!-- 材质描述 -->
        <Cell
          v-if="cellIsShow.IsMaterialDetail"
          fix="left"
          label="材质描述"
          prop="materialDetail"
        />
        <!-- ItemNo -->
        <Cell v-if="cellIsShow.IsItemNo" label="ItemNo" prop="itemNo" />
        <!-- 报价 -->
        <Cell v-if="cellIsShow.IsDpPrice" label="DP报价" prop="dpPrice" />
        <!-- 数量 -->
        <Cell v-if="cellIsShow.IsQty" label="数量" prop="qty" />
        <!-- 尺寸 -->
        <Cell v-if="cellIsShow.IsSize" label="尺寸" prop="size" />
        <!-- TempCode -->
        <Cell v-if="cellIsShow.IsSize" label="TempCode" prop="tempCode" />
        <!-- solution -->
        <Cell v-if="cellIsShow.IsSolution" label="Solution" prop="solution" />
        <!-- 工艺描述 -->
        <Cell v-if="cellIsShow.IsIdProcess" label="工艺描述" prop="idProcess" />
        <!-- 拥有者 -->
        <Cell v-if="cellIsShow.IsOwner" label="拥有者" prop="owner" />
        <!-- 供应商 -->
        <Cell v-if="cellIsShow.IsVendor1" label="一级供应商" prop="vendor1" />
        <Cell v-if="cellIsShow.IsVendor2" label="二级供应商" prop="vendor2" />
        <Cell v-if="cellIsShow.IsVendor3" label="三级供应商" prop="vendor3" />
        <Cell v-if="cellIsShow.IsVendor4" label="四级供应商" prop="vendor4" />
        <Cell v-if="cellIsShow.IsVendor5" label="五级供应商" prop="vendor5" />

        <!-- Category -->
        <Cell v-if="cellIsShow.IsCategory" label="Category" prop="category" />
        <!-- commodity -->
        <Cell v-if="cellIsShow.IsCommodity" label="Commodity" prop="commodity" />
        <!-- gcmOwner -->
        <Cell label="Gcm Owner" prop="gcmOwner">
          <template slot-scope="scope">
            {{ gcmOwnerById(scope.row.gcmOwner) }}
          </template>
        </Cell>
        <!-- RD Function -->
        <Cell v-if="cellIsShow.IsRdFunction" label="RD Function" prop="rdFunction" />
        <!-- gcmFunction -->
        <Cell v-if="cellIsShow.IsGcmFunction" label="Gcm Function" prop="gcmFunction" />
        <!-- 模穴数 -->
        <Cell v-if="cellIsShow.IsToolingCave" label="模穴数" prop="toolingCave" />
        <!-- 重量 -->
        <Cell v-if="cellIsShow.IsWeight" label="重量" prop="weight" />
        <!-- Cost -->
        <Cell v-if="cellIsShow.IsCost" label="Cost" prop="cost" />
        <!-- trackingOption -->
        <Cell v-if="cellIsShow.IsTrackingOption" label="Tracking & Option" prop="trackingOption" />
      </VirtualTable>
    </div>

    <!--图片对话框-->
    <BaseDialog
      v-if="picDialogVisible"
      title="图片查看"
      :visible.sync="picDialogVisible"
      width="35%"
    >
      <BaseIdpPicView
        :idp-token="idpToken"
        :pic-list="picList"
        @cancel="picDialogVisible = false"
      />
    </BaseDialog>
    <!--TODO: 设置显示列对话框 -->
    <BaseDialog
      v-if="setDialogVisible"
      title="设置显示列"
      :visible.sync="setDialogVisible"
      width="50%"
    >
      <RfqCellShowSet
        :cellIsShow="cellIsShow"
        :pageId="pageId"
        @cancel="setDialogVisible = false"
        @saveOperationData="saveOperationData"
      />
    </BaseDialog>
  </div>
</template>
<script>
// import { idpGetToken } from '@/api/quote/idp'
import { fdRowPictureList } from '@/api/quote/fd-row-picture'
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
import rfqCell from '@/mixins/rfqCell'
import RfqCellShowSet from '../../components/RfqCellShowSet'

export default {
  name: 'RfqDetailView',
  components: { VirtualTable, Cell, RfqCellShowSet },
  mixins: [rfqCell],

  props: {
    inputData: {
      default: () => null,
      type: Object
    },

    shareDataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // idp token
      idpToken: '',
      // 每一行的图片数据
      picList: [],
      // 图片对话框可见标识
      picDialogVisible: false,
      // 合计信息
      totalResult: {
        totalLen: 0,
        currentLen: 0
      },
      setDialogVisible: false,
      pageId: 'RfqAssignView',
      cellIsShow: {}
    }
  },
  mounted() {
    // this.pageDataInit()
  },
  methods: {
    // pageDataInit() {
    //   this.getIdpGetToken()
    // },
    // async getIdpGetToken() {
    //   try {
    //     const idpTokenRes = await idpGetToken({})
    //     this.idpToken = idpTokenRes.data.accessToken
    //   } catch (error) {
    //     console.log(error)
    //   }
    // },

    // 查看fd每一行图片列表
    async fdPicList(data, isNew) {
      const res = await fdRowPictureList({ rfqRowId: data.rfqRowId, isNew: isNew })
      this.picList = res.data
      this.picDialogVisible = true
    },

    totalCb(args) {
      this.totalResult = { ...args }
    }
  }
}
</script>
<style lang="scss" scoped>
.fd-detail {
  .custom-top {
    width: calc(100% - 17px);
    height: 42px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
}
</style>
